<template>
  <el-row style="padding: 80px 20px 0 20px;background-color:#f8fafd">
    <!-- 顶部搜索框 -->
    <div class="searchbox">
      <span class="left">设备编号:</span>
      <el-input placeholder="请输入" v-model="searchinfo.innerCode" clearable></el-input>
      <el-button icon="el-icon-search" @click="searchbtn">查询</el-button>
    </div>
    <!--中部新建按钮  -->
    <div class="down">

      <el-table  :data="sblist.currentPageRecords" stripe style="width: 100%">
        <el-table-column  type="index" label="序号" min-width="80"/>
        <el-table-column prop="innerCode" label="设备编号" width="100"/>
        <el-table-column prop="type.name" label="设备型号" width="100"/>
        <el-table-column prop="type.image" label="型号图片" width="140">
          <template v-slot="{row}">
              <img style="wdith:24px;height:24px" :src="row.type.image" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="region.name" label="详细地址" min-width="145"/>
        <el-table-column prop="vmStatus" :formatter="vmStatusformatter" label="运营状态" min-width="145" />
        <el-table-column prop="status" label="设备状态" min-width="300">
          <template v-slot="{row}">
            <span :class="row.status[10001]?'greenactive':'yellowactive'" >离线</span>
            <span :class="row.status[10002]?'greenactive':'yellowactive'" >货道</span>
            <span :class="row.status[10003]?'greenactive':'yellowactive'" >传动轴</span>
          </template>
        </el-table-column>
        <el-table-column  label="操作" width="100">
          <template v-slot="{ row }">
            <a href="javascript:;" @click="getdetailinfo(row)">查看详情</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageinfo" >
          <span>共条{{this.sblist.totalCount}}记录  第{{this.sblist.pageIndex}}/{{this.sblist.totalPage}}页</span>
          <div class="button">
            <el-button class="pagebutton" :disabled="sblist.pageIndex==='1'||''?true:false" @click="pageup">上一页</el-button>
            <el-button class="pagebutton" :disabled="sblist.pageIndex===sblist.totalPage" @click="pagedown">下一页</el-button>
          </div>
      </div>
      <!-- 新建的dialog -->
      <el-dialog  title="设备详情"  :visible="createDia.visible"  width="50%" @close="createDia.visible=false" center>
        <div class="topbox">
        <div class="top"><div>销售量</div><span>{{detailinfo.orderConut}}个</span></div>
        <div class="top"><div>销售额</div><span>{{(detailinfo.orderAmount/100).toFixed(2)}}元</span></div>
        <div class="top"><div>补货次数</div><span>{{detailinfo.supplyCount}}次</span></div>
        <div class="top"><div>维修次数</div><span>{{detailinfo.repairCount}}次</span></div>
        </div>
        <div style="margin:20px 0 20px  40px">商品销售(月)</div>
        <div class="down">
          <div class="downbox" v-for="item,index in skulist" :key="index" >{{item.skuName}}:{{item.count}}</div>

        </div>
      </el-dialog>

    </div>
  </el-row>
</template>

<script>

//
import { getsbztlist, getorderConut, getorderAmount, getsupplyCount, getrepairCount, getskuCollect } from '@/api/sbzt'
export default {
  created () {
    this.searchbtn()
  },
  data () {
    return {
      searchinfo: {
        innerCode: '',
        pageIndex: 1,
        pageSize: 10
      },
      sblist: {},
      createDia: {
        visible: false,
        type: '新增设备类型',
        isShow: true,
        editimg: ''
      },
      createinfo: {
        vmRow: 0,
        vmCol: 0,
        name: '',
        channelMaxCapacity: 0,
        model: '',
        image: ''
      },

      detailinfo: {
        orderAmount: 0,
        orderConut: 0,
        supplyCount: 0,
        repairCount: 0
      },
      skulist: []
    }
  },

  methods: {
    async getdetailinfo (row) {
      console.log(row.innerCode)
      const { data: orderConut } = await getorderConut({
        innerCode: row.innerCode,
        start: this.$moment().startOf('months').format('YYYY-MM-DD') + ' 00:00:00',
        end: this.$moment().endOf('months').format('YYYY-MM-DD') + ' 23:59:59'
      })
      console.log(orderConut)
      this.detailinfo.orderConut = orderConut
      const { data: orderAmount } = await getorderAmount({
        innerCode: row.innerCode,
        start: this.$moment().startOf('months').format('YYYY-MM-DD') + ' 00:00:00',
        end: this.$moment().endOf('months').format('YYYY-MM-DD') + ' 23:59:59'
      })
      console.log(orderAmount)
      this.detailinfo.orderAmount = orderAmount
      const { data: supplyCount } = await getsupplyCount(row.innerCode, this.$moment().startOf('months').format('YYYY-MM-DD'), this.$moment().endOf('months').format('YYYY-MM-DD'))
      console.log(supplyCount)
      this.detailinfo.supplyCount = supplyCount
      const { data: repairCount } = await getrepairCount(row.innerCode, this.$moment().startOf('months').format('YYYY-MM-DD'), this.$moment().endOf('months').format('YYYY-MM-DD'))
      console.log(repairCount)
      this.detailinfo.repairCount = repairCount
      const { data: list } = await getskuCollect(row.innerCode, this.$moment().startOf('months').format('YYYY-MM-DD'), this.$moment().endOf('months').format('YYYY-MM-DD'))
      console.log(list)
      this.skulist = list
      this.createDia.visible = true
    },
    vmStatusformatter (a) {
      if (a.vmStatus === 1) return '运营'
      else if (a.vmStatus === 0) return '未投放'
      else if (a.vmStatus === 3) return '撤机'
    },
    async searchbtn () {
      const { data } = await getsbztlist(this.searchinfo)
      console.log(data)
      this.sblist = data
    },
    async pageup () {
      if (this.sblist.pageIndex !== '1') {
        this.sblist.pageIndex--
        const { data } = await getsbztlist({
          pageIndex: this.sblist.pageIndex,
          paseSize: 10,
          innerCode: this.searchinfo.innerCode
        })
        console.log(data)
        this.sblist = data
      }
    },
    async pagedown () {
      if (this.sblist.pageIndex !== this.sblist.totalPage) {
        this.sblist.pageIndex++
        const { data } = await getsbztlist({
          pageIndex: this.sblist.pageIndex,
          paseSize: 10,
          innerCode: this.searchinfo.innerCode
        })
        console.log(data)
        this.sblist = data
      }
    }
    // handleChange (a) {
    //   console.log(a)
    //   this.createinfo.image = a.response
    // },
    // async createSubmit () {
    //   try {
    //     const { data } = await addSb(this.createinfo)
    //     if (data) { this.$message.success('新增成功') }

    //     this.searchbtn()
    //   } catch (e) {
    //     this.$message(e.response.data)
    //     console.log(e)
    //   } finally {
    //     this.createDia.visible = false
    //   }
    // },
    // editsb (row) {
    //   console.log(row)
    //   this.createDia.type = '修改设备类型'
    //   this.createinfo.vmRow = row.vmRow
    //   this.createinfo.vmCol = row.vmCol
    //   this.createinfo.name = row.name
    //   this.createinfo.channelMaxCapacity = row.channelMaxCapacity
    //   this.createinfo.model = row.model
    //   this.createDia.editimg = row.image
    //   this.createDia.isShow = false
    //   this.createDia.visible = true
    // },
    // editimage () {
    //   this.createDia.isShow = true
    // },
    // async delsb (row) {
    //   console.log(row)
    //   try {
    //     const res = await delSb(row.typeId)
    //     console.log(res)
    //     this.$message.success('删除成功')
    //     this.searchbtn()
    //   } catch (e) {
    //     console.log(e)
    //     this.$message(e.response.data)
    //   }
    // }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  .searchbox {
    // background-color: skyblue;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 64px;
    width: 100%;
    span{
      font-size: 14px;
      width:110px;
      line-height: 36px;
      height:36px;
    }
    .el-input {
      width: 210px;
      line-height: 36px;
      // height: 36px !important;
    }
    .el-button{
      background-color: #5f84ff;
      color: #fff;
      border: none;
      margin-left: 10px;
      width:80px;
      height:36px;
      padding: 0 0;
    }
  }
  .down{
    .greenactive{

    height: 23px;
    padding: 0 12px;
    background: #ff665f linear-gradient(135deg,#3fc997,#4bda98);
    border-radius: 14px;
    text-align: center;
    color: #fff;
    line-height: 23px;
    }
    .yellowactive{
     background: #ff665f linear-gradient(135deg,#ffb043,#ffc020);
      height: 23px;
    padding: 0 12px;
    border-radius: 14px;
    text-align: center;
    color: #fff;
    line-height: 23px;
    }
    .mid{//新建按钮
    margin-bottom: 20px;
      .el-button.create{
        background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
        color:#fff ;
        border:none;
      }
      .el-button.create:hover{
        background: linear-gradient(135deg,#ff7d43,#db3602)!important;
      }
      .el-button.input{
        background: #fbf4f0!important;
        color:#655b56 ;
        border:none;
      }
      .el-button.input:hover{
        background:#f3e7e1!important;
      }
    }
    .pageinfo{//页脚的 页数信息
      display:flex;
      justify-content:space-between;
      width:100%;
      height:96px;
      padding:32px 16px;
      line-height:32px;
      .button{
        display: flex;
        .pagebutton{
          width:70px;
          height:32px;
          padding:0 0
        }
      }
    }
  }
}
  .el-dialog{
    padding: 20px 20px 30px;

    .topbox{
      display: flex;
      justify-content: center;
      .top{
      display:flex;
      align-items: center;
      justify-content: center;
      width:145px;
      height:54px;
      background-color:#bcbec1;
      span{
        color: #5f84ff;
        font-size: 14px
      }
      }
    }
      .down{
        margin: 0px 40px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .downbox{
          border: 1px solid black;
          width: 25%;
          height:40px;
          line-height: 40px;
          text-align: center;
        }
      }
  }
</style>
